<template>
  <div class="withdraw" ref="fullHomePage">
    <nav-top title="提现" :goback="true"></nav-top>
    <a class="goto-list" href="/">提现记录</a>
    <div class="withdraw-info">
      <p class="withdraw-title">提现方式</p>
      <van-radio-group v-model="type">
        <van-cell-group :border="false">
          <van-cell class="withdraw-type" :border="false" clickable @click="type = '1'" v-show="false">
            <img class="type-icon" src="/static/icon/withdraw/wxpay.png" slot="icon" />
            <p slot="title" >支付宝</p>
            <van-radio name="1">
              <img
                class="radio-icon"
                slot="icon"
                slot-scope="props"
                :src="props.checked ? '/static/icon/select-select.png' : '/static/icon/select-none.png'"
              />
            </van-radio>
          </van-cell>
          <div class="line"></div>
          <van-cell class="withdraw-type" :border="false" clickable @click="type = '2'">
            <img class="type-icon" src="/static/icon/withdraw/alipay.png" slot="icon" />
            <p slot="title">微信</p>
            <van-radio name="2">
              <img
                class="radio-icon"
                slot="icon"
                slot-scope="props"
                :src="props.checked ? '/static/icon/select-select.png' : '/static/icon/select-none.png'"
              />
            </van-radio>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <div class="input">
      <van-cell-group>
        <van-field
          class="input-money"
          v-model="money"
          type="text"
          :border="false"
          onclick="this.blur()"
          @focus="keyshow=true"
          label-width="4.437rem"
          :placeholder="'账户余额￥'+sum"
        >
          <p class="input-label" slot="label">金额</p>
          <button slot="button" type="primary" @click="money=sum">全部提出</button>
        </van-field>
      </van-cell-group>
    </div>
    <div class="input">
      <van-cell-group>
        <van-field
          class="input-name"
          v-model="name"
          type="text"
          :border="false"
          clearable
          label-width="5.94rem"
          placeholder="请输入您的姓名"
        >
          <p class="input-label" slot="label">真实姓名</p>
        </van-field>
      </van-cell-group>
      <div class="line"></div>
      <van-cell-group>
        <van-field
          class="input-account"
          v-model="account"
          type="text"
          :border="false"
          clearable
          label-width="5.94rem"
          placeholder="请输入您的提现账号"
        >
          <p class="input-label" slot="label">提现账号</p>
        </van-field>
      </van-cell-group>
    </div>
    <div class="remark">
      <p class="remark-title">*提现说明：</p>
      <p class="remark-value">
        单次最低提现金额120
        <br />提现到微信请关注新的朋友提醒。
      </p>
    </div>

    <div class="submit">
      <button>提交</button>
    </div>
    <van-number-keyboard
      :show="keyshow"
      extra-key="."
      close-button-text="确定"
      @blur="keyshow = false"
      @input="onInput"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";

export default {
  components: {
    NavTop
  },
  name: "Withdraw",
  data() {
    return {
      type: 1,
      money: "",
      name: "",
      account: "",
      sum: 10.0,
      clientHeight: "",
      keyshow: false
    };
  },
  mounted() {
    this.clientHeight = `${document.documentElement.clientHeight}`;
    window.onresize = function temp() {
      this.clientHeight = `${document.documentElement.clientHeight}`;
    };
  },
  watch: {
    clientHeight: function() {
      this.changeFixed(this.clientHeight);
    }
  },
  methods: {
    changeFixed(clientHeight) {
      this.$refs.fullHomePage.style.height = clientHeight + "px";
    },
    handleInput() {
      this.money = this.money.replace("-", "");
    },

    onInput(value) {
      if (value == ".")
        if (this.money.length == 0) this.money = "0";
        else if(this.money.indexOf('.')>=0) return;
      if (!/^-?\d+\.?\d{0,1}$/.test(this.money)) {
        this.money = this.money.substring(0, this.money.indexOf(".") + 2);
      }
      this.money += value;
      var m = parseFloat(this.money);
      if (m<0) this.money = 0 + '';
      if (m>this.sum) this.money = this.sum + '';
    },
    onDelete() {
      this.money = this.money.substring(0, this.money.length - 1);
    }
  }
};
</script>
<style lang='scss' scoped>
.withdraw {
  background: #f5f5f7;
  .goto-list {
    font-size: 11px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 1em;
    position: fixed;
    z-index: 210;
    top: 19px;
    right: 14px;
    z-index: 210;
  }
  p {
    margin: 0;
    line-height: 1em;
  }
  .line {
    background: #f5f5f7;
    margin: 0 8px 0 9px;
    width: 303px;
    height: 1px;
  }
  .withdraw-info {
    margin-top: 45px;
    background-color: #ffffff;
    margin-bottom: 6px;
    .withdraw-title {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      height: 24px;
      padding: 14px 0 0 9px;
      border-bottom: 1px solid #f5f5f7;
    }
    .withdraw-type {
      padding: 11px 8px 12px 8px;
      position: relative;
      .type-icon {
        width: 23px;
        height: 23px;
      }
      p {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        padding-top: 5px;
        padding-left: 9px;
      }
      .radio-icon {
        width: 17px;
        height: 17px;
        position: relative;
        top: -2px;
      }
    }
  }

  .input {
    margin-bottom: 6px;
    > div::after {
      border-width: 0;
    }
    .input-money,
    .input-name,
    .input-account {
      padding: 14px 10px 14px 0;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      line-height: 16px;
      .input-label {
        padding-left: 16px;
        padding-top: 2px;
      }
    }
    .input-money button {
      font-size: 11px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(6, 164, 79, 1);
      line-height: 1em;
      background-color: #ffffff;
      border: none;
    }
  }
  .remark {
    clear: both;
    padding-top: 4px;
    padding-left: 13px;
    p {
      font-size: 11px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(254, 156, 17, 1);
      line-height: 13px;
      float: left;
    }
  }

  .submit {
    margin: 75px auto;
    text-align: center;
    button {
      width: 279px;
      height: 44px;
      background: #06a44f;
      border: none;
      border-radius: 4px;
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
